<template>
  <el-input
    class="ipt"
    placeholder="请输入关键字"
    v-model="address"
    @keyup.enter="addressSearch"
  />
  <el-button type="primary" class="btn" @click="addressSearch">查询</el-button>
  <div id="popup1">
    <div class="title">
      事件详情信息
      <button class="btn-close" @click="handleClose">×</button>
    </div>

    <table v-if="eventTitle">
      <thead>
        <tr>
          <th>{{ eventTitle[1] }}</th>
          <td>{{ eventContent[1] }}</td>
        </tr>
        <tr>
          <th>{{ eventTitle[3] }}</th>
          <td>{{ eventContent[3] }}</td>
        </tr>
        <tr>
          <th>{{ eventTitle[4] }}</th>
          <td>{{ eventContent[4] }}</td>
        </tr>
        <tr>
          <th>{{ eventTitle[7] }}</th>
          <td>{{ eventLevel(eventContent[7]) }}</td>
          <!-- <td v-if="eventContent[7] == 0">未处理</td>
          <td v-if="eventContent[7] == 1">处理中</td>
          <td v-if="eventContent[7] == 2">已处理</td> -->
        </tr>
      </thead>
    </table>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { queryByAddress } from './hooks/useQueryByAddress'
// import { docLayer } from '../Map/Hooks/useGuangguMap'

let address = ref()
// 绑定事件，根据地点查询事件
let map = ref()
onMounted(() => {
  map.value = useGlobalMap()
})

let eventTitle = ref(null)
let eventContent = ref(null)
function addressSearch() {
  queryByAddress(map.value, address.value)
  map.value.on('click', function (evt) {
    //判断当前单击处是否有要素，捕获到要素时弹出popup
    var feature = map.value.forEachFeatureAtPixel(
      evt.pixel,
      function (feature, layer) {
        return feature
      }
    )
    if (feature) {
      let event = feature.values_.values_
      eventTitle.value = Object.keys(event)
      eventContent.value = Object.values(event)
      console.log(eventTitle.value)
      console.log(eventContent.value)
      var position = feature.getGeometry().flatCoordinates
      window.addEventListener('click', handleMap)
      setTimeout(() => {
        window.removeEventListener('click', handleMap)
      }, 100)
    }
  })

  function handleMap(evt) {
    var { pageX, pageY } = evt
    let popup = document.querySelector('#popup1')
    popup.style.display = 'block'
    popup.style.left = pageX - 100 + 'px'
    popup.style.top = pageY - 75 + 'px'
  }
}
function handleClose() {
  let popup = document.querySelector('#popup1')
  popup.style.display = 'none'
}
const eventLevel = computed(() => {
  return (status) => {
    if (status) {
      if (status === 0) {
        return '未处理'
      } else if (status === 1) {
        return '处理中'
      } else {
        return '已处理'
      }
    }
  }
})
// 展示
</script>

<style scoped>
.ipt {
  height: 40px;
  width: 200px;
  top: 10%;
}
.btn {
  position: relative;
  align-items: center;
  margin-left: 15px;
  top: 15%;
}

#popup1 {
  display: none;
  width: 260px;
  height: 200px;
  border: 1px solid #333;
  position: fixed;
  left: 20px;
  top: 20px;
  z-index: 1000;
  background-color: #fff;
  border-style: none;
}
table {
  margin-top: 15px;
  margin-left: 12px;
  border-collapse: collapse;
  width: 90%;
  height: 70%;
}
th,
td {
  height: 30px;
  border: 1px solid #eee;
  text-align: center;
}
.title {
  position: relative;
  width: 100%;
  height: 30px;
  color: #fff;
  font-size: 16px;
  background-color: #2196f3;
}
.btn-close {
  position: absolute;
  right: 5px;
  border: none;
  font-size: 25px;
  background-color: transparent;
  color: #eee;
}
</style>
